<script setup lang="ts">
import {onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onMounted, onUnmounted, onUpdated, Ref, ref} from "vue";

const count: Ref<number> = ref<number>(1)
const handleAddCount: () => void = (): void => {
  count.value++
}

onBeforeMount(() => {
  console.log("组件挂载前")
})
onMounted(() => {
  console.log("组件挂载了")
})

onBeforeUpdate(() => {
  console.log("组件更新前")
})
onUpdated(() => {
  console.log("组件更新了")
})
onBeforeUnmount(() => {
  console.log("组件卸载前")
})
onUnmounted(() => {
  console.log("组件卸载了")
})
onActivated(() => {
  console.log("组件激活了")
})
onDeactivated(() => {
  console.log("组件失活了")
})
</script>

<template>
  <div class="app">
    <h1>count的值是:{{ count }}</h1>
    <button @click="handleAddCount">count +1</button>
  </div>
</template>
